Skip to main content

Build Status

React Gmaps

A Google Maps component for React.js

Features

  • Lazy Google Maps loading
  • Easy to use

Installation

$ npm install react-gmaps --save

Demo

http://react-gmaps.herokuapp.com/

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import {Gmaps, Marker, InfoWindow, Circle} from 'react-gmaps';

const coords = {
lat: 51.5258541,
lng: -0.08040660000006028
};

const params = {v: '3.exp', key: 'YOUR_API_KEY'};

class App extends React.Component {

onMapCreated(map) {
map.setOptions({
disableDefaultUI: true
});
}

onDragEnd(e) {
console.log('onDragEnd', e);
}

onCloseClick() {
console.log('onCloseClick');
}

onClick(e) {
console.log('onClick', e);
}

render() {
return (
<Gmaps
width={'800px'}
height={'600px'}
lat={coords.lat}
lng={coords.lng}
zoom={12}
loadingMessage={'Be happy'}
params={params}
onMapCreated={this.onMapCreated}>
<Marker
lat={coords.lat}
lng={coords.lng}
draggable={true}
onDragEnd={this.onDragEnd} />
<InfoWindow
lat={coords.lat}
lng={coords.lng}
content={'Hello, React :)'}
onCloseClick={this.onCloseClick} />
<Circle
lat={coords.lat}
lng={coords.lng}
radius={500}
onClick={this.onClick} />
</Gmaps>
);
}

};

ReactDOM.render(<App />, document.getElementById('gmaps'));

Test

$ npm test